<template>
   <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox">
        <label for="toggle-all"></label>
        <ul class="todo-list">
         <li 
         :class="{completed: item.isDone, editing: item.id===currentId}" 
         v-for="item in  showList"
          :key="item.id"
          >
            <div class="view">
              <input class="toggle" 
              type="checkbox" 
              :checked="item.isDone"
              @change="change(item.id)"
              >
              <label
              @dblclick="showEdit(item)"
              >
              {{item.name}}</label>
              <button 
              class="destroy" 
              @click="del(item.id)"

              ></button>
            </div>
            <input 
            class="edit" 
            v-model="currentname"
            @keyup.esc="cancel"
            @keyup.enter="edit"
            >
          </li>
        </ul>
      </section>
</template>

<script>
export default {
  data() {
    return {
      currentId:'',
      currentname:''
    }
  },
props : {
   list : {
     type : Array,
     required: true
   },
   type:{
     type:String,
     required:true
   }
},
methods : {
  del(id) {
    this.$emit('del',id)
  },
  change(id) {
    this.$emit('change',id)
  },
  showEdit(item) {
      this.currentId=item.id
      this.currentname=item.name

  },
cancel() {
  this.currentId = ''
  this.currentname=''
},
edit() {
  this.$emit('edit',this.currentId,this.currentname)
  this.currentId = ''
  this.currentName = ''
}
},
computed: {
   showList() {
     if(this.type === 'active') {
       return this.list.filter(item=> !item.isDone)
     }else if (this.type==='completed') {
       return this.list.filter(item=> item.isDone)
     }else {
       return this.list
     }
   }
}
}
</script>

<style>

</style>